import React from 'react';
import {useNavigate} from 'react-router-dom'
import { Swiper,Flex } from 'react-vant';
import {SwiperModule}  from '../SwiperModule';
import { Arrow } from '@react-vant/icons'
import './index.scss';

export const RankingList = props => {
    const navigate = useNavigate()

    function goSongListDetails(id){
        navigate('/songlistdetails?id='+id)
    }
    const swpierItems = props.topList.map((item, index) => (
        <Swiper.Item key={index} style={{heigth:'200px'}}>
             <div className='main' onClick={()=>goSongListDetails(item.id)}>
                <Flex justify='center' align='center'>
                    <h4>{item.name}</h4>
                    <Arrow  fontSize='0.9rem'/>
                </Flex>
                {item.tracks.map((songItem,songIndex)=>{
                    return (
                        <div key={songIndex} className="song">
                            <Flex justify='start' align='center'>
                                <img src={songItem.al.picUrl+'?param=100y100'}/>
                                <Flex justify='start' align='center'>
                                    <div className='songIndex'>{songIndex+1}</div>
                                    <div>
                                        {songItem.name.length>8?songItem.name.slice(0,8)+'...':songItem.name}
                                        <span>-{songItem.ar[0].name.length>7?songItem.ar[0].name.slice(0,7)+'...':songItem.ar[0].name}</span>
                                    </div>
                                </Flex>
                            </Flex>
                        </div>
                    )
                })}
            </div>
        </Swiper.Item>
    ))
    return (
        <div className='ranking_list'>
            <SwiperModule swpierItems={swpierItems} loop={false} slideSize={88} indicator={false}/>
        </div>
    );
};

